<template>
  <!-- <el-dialog
    :visible.sync="dialogVisible"
    title="提示"
    width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog> -->
  <div id="wrap">
    <h1>welcome to</h1><br><br>
    <div id="form-wrap">
      <form>
        <p class="English">HELLO FRIENDS,</p>
        <p class="titleName">智能学伴系统</p>
        <p class="smallEnglish">Intelligent learning partner system</p>
        <p class="nomall">一个以
          <span class="emphasize">知识图谱</span>
          为导航的教学资源推荐学习平台。
          <br>
          <span class="emphasize">在这里，</span>
          教学资源的分类打破了按照教材目录划分的划分规则，
          <br>
          通过知识点之间、资源之间以及资源与知识点之间的联系紧密程度进行重新划分。
          <br>
          同时，这里囊括了海量的学习资源，并通过
          <span class="emphasize">切片技术</span>
          降低了资源的颗粒度。
          <br>
          原有资源在提取和分割的基础上进行了
          <span class="emphasize">重组</span>
          和再次利用。
          <br>
          无论您是老师亦或是学生，在这里，我们都期望能成为您学习过程中的伙伴。
          <br>
          如果您有疑问或是建议，欢迎您与我们进行交流！
        </p>
        <p class="bestWishes">Best Wishes</p>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

<style scoped>
  body,div,h1,form,input,textarea,p{
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
  }
  body{
      background: white;
      color: black;
  }
  p{
    line-height: 150%;
  }

  .smallEnglish{
    font-size: 8px;
    font-family: tahoma;
    text-transform: uppercase;
    color: rgb(192, 192, 192);
    margin-bottom: 10px;
  }
  .English{
    font-size: 22px;
    font-family: tahoma;
    margin-bottom: 20px;
  }
  .titleName{
    font-size: 24px;
    color: rgb(117, 117, 117);
    font-weight: bolder;
  }
  .bestWishes{
    float: right;
    margin-top: 20px;
    margin-right: 50px;
    text-transform: uppercase;
    color: rgb(90, 90, 90);
    font-size: 14px;
  }
  .emphasize{
    font-size: 16px;
    color: gray;
    font-weight: bolder;
  }
  .nomall{
      font-size: 15px;
      color: gray;
      margin: 2px;
  }
  h1{
      margin-bottom: 20px;
      text-align: center;
      font-size: 35px;
      font-family: tahoma;
      color: white ;
  }
  #wrap{
      width: 530px;
      margin: 20px auto 0;
      height: 1000px;
  }

  #form-wrap{
      overflow: hidden;
      height: 447px;
      position: relative;
      top:0px;
      transition: all 1s ease-in-out 0.3s;
  }
  #form-wrap::before{
      content: "";
      position: absolute;
      bottom: 60px;
      left: 0px;
      background: url("~@/assets/introduce/信封前.png");
      width:530px;  /*图片*/
      height: 317px;

  }
  #form-wrap::after{
      content: "";
      position: absolute;
      bottom: 0px;
      left: 0px;
      background: url("~@/assets/introduce/信封后1.png");
      width: 530px;
      height: 259px;

  }
  #form-wrap.hide:after,
  #form-wrap.hide:before{
      display: none;
  }
  #form-wrap:hover{
      height: 777px;
      top: -200px;
  }
  form{
      background: white;
      position: relative;
      top: 180px;
      overflow: hidden;
      /*内容长度*/
      height: 500px;
      width: 460px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid white;
      border-right: 3px;
      transition: all 1s ease-in-out 0.3s;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  #form-warp:hover form{
      height: 800px;
  }
</style>
